<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div v-if="userStore.utype == 2">
        <div style="margin-top: 2%; margin-bottom: 2%">
          <el-input v-model="person" size="middle" @input="queryName">
            <template #append>
              <el-button :icon="Search" />
            </template>
            <template #prepend> 通知人 </template>
          </el-input>
        </div>
        <el-table :data="noticeSend" style="width: 100%" border>
          <el-table-column type="selection" width="55" style="align-items: center" />
          <el-table-column
            v-if="false"
            prop="_id"
            label="id"
            width="220"
            style="align-items: center"
          />
          <el-table-column prop="title" label="通知标题" width="220" style="align-items: center" />
          <el-table-column prop="name" label="发送人" width="120" style="align-items: center" />
          <el-table-column prop="type" label="通知类型" width="120" style="align-items: center" />
          <el-table-column
            prop="create_date"
            label="通知时间"
            width="300"
            style="align-items: center"
          />
          <el-table-column fixed="right" label="操作" align-items="center">
            <template #default="scoped">
              <el-button link type="primary" size="small" @click="show(scoped.row._id)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          style="margin-left: 65%; margin-top: 2%"
          small
          :total="total"
          @current-change="handelCurrentChange"
          v-model:current-page="currentPage"
        />
        <el-dialog v-model="messageVisible" width="70%" draggable>
          <template #header>
            {{ message.title }}
          </template>
          <div v-html="message.content"></div>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="messageVisible = false"> 确定 </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div v-else>
        <Error></Error>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import Error from '@/views/error/404.vue'
  import { Search } from '@element-plus/icons-vue'
  import { getReceiveMessage, getPBInfoReceive } from '@/lafSdkCollection/getMessageInfo'
  import { useUserStore } from '@/store/modules/user'
  import { getCollegeName } from '@/lafSdkCollection/getPartyMember'
  import watermark from '@/utils/watermark.js'
  const person = ref('')
  const userStore = useUserStore()
  const noticeSend = ref([])
  const total = ref(0)
  const currentPage = ref(1)
  const messageVisible = ref(false)
  const message = ref({
    title: '',
    content: '',
  })
  const getMessage = async () => {
    const { resNotice, resActivity } = await getReceiveMessage(userStore._id)
    for (let i = 0; i < resNotice.data.length; i++) {
      let baseTime = resNotice.data[i].create_date
      let d = new Date(baseTime)
      let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      let sender_name = ''
      const r = await getCollegeName(resNotice.data[i].sender_id)
      if (r.data.length == 0) {
        sender_name = '中国共产党(假数据)'
      } else {
        sender_name = r.data[0].info.college_name
      }

      noticeSend.value.push({
        _id: resNotice.data[i]._id,
        title: resNotice.data[i].title,
        name: sender_name,
        content: resNotice.data[i].content,
        type: '私发',
        create_date: batchDate,
      })
    }
    for (let i = 0; i < resActivity.data.length; i++) {
      let baseTime = resActivity.data[i].create_date
      let d = new Date(baseTime)
      let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      let sender_name = '中山大学软件工程学院'
      noticeSend.value.push({
        _id: resActivity.data[i]._id,
        title: resActivity.data[i].title,
        name: sender_name,
        content: resActivity.data[i].content,
        type: '公告',
        create_date: batchDate,
      })
    }
  }
  const noticeSendCopy = ref([])
  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.info.branch_name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
  onMounted(async () => {
    setWaterMark()
    await getMessage()
    noticeSendCopy.value = noticeSend.value
    total.value = noticeSend.value.length + 1 / 10
  })
  const show = (_id) => {
    messageVisible.value = true
    message.value.title = noticeSend.value.find((item) => item._id === _id).title
    message.value.content = noticeSend.value.find((item) => item._id === _id).content
  }
  const queryName = () => {
    if (person.value.length > 0) {
      noticeSend.value = noticeSendCopy.value
      noticeSend.value = noticeSend.value.filter((item) => item.name.match(person.value))
    } else {
      noticeSend.value = noticeSendCopy.value
    }
  }
  //获取当前页数
  const handelCurrentChange = async (nowPage) => {
    //获取当前页码
    currentPage.value = nowPage
    const res = await getPBInfoReceive(nowPage, 10, userStore._id)
    noticeSend.value = res.data
  }
</script>
<style scoped lang="scss"></style>
